﻿<template>
  <div>
    <p>当前时间: {{ currentTime }}</p>
    <button @click="updateCurrentTime">更新时间</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleTimeString(),
      timerId: null
    }
  },
  beforeCreate() {
    console.log('beforeCreate: 组件实例刚被创建');
  },
  created() {
    console.log('created: 组件实例已经完全创建');
    this.updateCurrentTime();
  },
  beforeMount() {
    console.log('beforeMount: 在挂载开始之前被调用');
  },
  mounted() {
    console.log('mounted: 组件已挂载到 DOM 上');
    // 设置定时器，每秒更新当前时间
    this.timerId = setInterval(() => {
      this.updateCurrentTime();
    }, 1000);
  },
  beforeUpdate() {
    console.log('beforeUpdate: 组件数据更新之前');
  },
  updated() {
    console.log('updated: 组件数据更新之后');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前调用');
    // 清除定时器
    if (this.timerId) {
      clearInterval(this.timerId);
    }
  },
  destroyed() {
    console.log('destroyed: Vue 实例销毁后调用');
  },
  methods: {
    updateCurrentTime() {
      this.currentTime = new Date().toLocaleTimeString();
    }
  }
}
</script>
